<!DOCTYPE html>
<html>
<head>
  <style>
        body {
            height: 100%;
            margin: 0;
            width: 100%;
            overflow: hidden;
        }

        #graphiql {
            height: 100vh;
        }
    </style>

  <!--
    You can host these files locally or include them directly in your resource bundler.
  -->
  <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.development.js"
  ></script>
  <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
  ></script>

  <!--
    These two files can be found in the npm module, however you may wish to
    copy them directly into your environment, or perhaps include them in your
    favored resource bundler.
   -->
  <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
</head>

<body>
<div id="graphiql">Loading GraphiQL...</div>
<script
    src="https://unpkg.com/graphiql/graphiql.min.js"
    type="application/javascript"
></script>
<script>
    function graphQLFetcher(path) {
        return graphQLParams => fetch(
            `${location.protocol}//${location.host}/api/graphql`,
            {
                method: 'post',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(graphQLParams),
            },
        ).then(function (response) {
            return response.json().catch(function () {
                return response.text();
            });
        });
    }

    const params = new URLSearchParams(window.location.search);
    const path = params.get("path") || "/api/graphql";
    const gqlFetcher = graphQLFetcher(path);
    ReactDOM.render(
        React.createElement(GraphiQL, {
            fetcher: gqlFetcher,
            defaultVariableEditorOpen: true,
        }),
        document.getElementById('graphiql'),
    );
</script>
</body>
</html>